<template>
  <van-cell class="comment-item">
    <!-- 用户信息 -->
    <div class="user-info">
      <img :src="reply?.avatar" alt="">
      <span class="nickname" v-text="reply?.nickname"></span>
      <van-rate v-model="star" readonly size="12" />
    </div>
    <!-- 商品信息与时间 -->
    <p class="time">{{ reply?.add_time }} {{ reply?.sku }}</p>
    <!-- 评价内容 -->
    <p class="comment-content" v-text="reply?.comment"></p>
    <!-- 图片列表 -->
    <ul class="picture">
      <li
        v-for="(item,index) in pics"
        :key="index"
      ><img :src="item" alt=""></li>
    </ul>
  </van-cell>
</template>

<script setup>
import { computed } from "@vue/reactivity"

const { reply } = defineProps({
  reply: {
    type: Object,
    required: true
  }
})

const star = computed(() => Number(reply?.star))
const pics = computed(() => reply?.pics )
</script>

<style lang="scss" scoped>
.comment {
  margin-bottom: 10px;

  .comment-item {
    padding: 10px 15px 20px;

    .user-info {
      font-size: 13px;
      display: flex;
      align-items: center;
      padding: 7px 0;

      img {
        width: 28px;
        height: 28px;
      }

      .nickname {
        padding: 0 10px 0 6px;
      }
    }

    .time {
      font-size: 12px;
      color: #82848f;
      padding: 5px 0;
    }

    .comment-content {
      font-size: 13px;
      margin-bottom: 10px;
    }

    .picture {
      li {
        float: left;
        padding-right: 7px;

        img {
          width: 78px;
          height: 78px;
        }
      }
    }
  }
}
</style>
